<template>
  <view class="weather-icon" :style="iconStyle">
    <text class="icon-text" :style="textStyle">{{ iconText }}</text>
  </view>
</template>

<script>
export default {
  name: 'WeatherIcon',
  props: {
    // 天气现象编码，如 d01, d04 等
    weatherCode: {
      type: String,
      default: 'd00'
    },
    // 图标大小
    size: {
      type: [Number, String],
      default: 24
    },
    // 图标颜色
    color: {
      type: String,
      default: '#333333'
    }
  },
  computed: {
    // 根据天气编码返回对应的图标字符
    iconText() {
      // 天气编码映射表
      const weatherIcons = {
        // 白天天气
        'd00': '☀️',  // 晴
        'd01': '⛅',  // 多云
        'd02': '☁️',  // 阴
        'd03': '🌦️',  // 阵雨
        'd04': '⛈️',  // 雷阵雨
        'd05': '⛈️',  // 雷阵雨伴有冰雹
        'd06': '🌨️',  // 雨夹雪
        'd07': '🌧️',  // 小雨
        'd08': '🌧️',  // 中雨
        'd09': '🌧️',  // 大雨
        'd10': '🌧️',  // 暴雨
        'd11': '🌧️',  // 大暴雨
        'd12': '🌧️',  // 特大暴雨
        'd13': '🌨️',  // 阵雪
        'd14': '❄️',  // 小雪
        'd15': '❄️',  // 中雪
        'd16': '❄️',  // 大雪
        'd17': '❄️',  // 暴雪
        'd18': '🌫️',  // 雾
        'd19': '🌧️',  // 冻雨
        'd20': '🌊',  // 沙尘暴
        'd21': '🌧️',  // 小雨-中雨
        'd22': '🌧️',  // 中雨-大雨
        'd23': '🌧️',  // 大雨-暴雨
        'd24': '🌧️',  // 暴雨-大暴雨
        'd25': '🌧️',  // 大暴雨-特大暴雨
        'd26': '🌨️',  // 小雪-中雪
        'd27': '🌨️',  // 中雪-大雪
        'd28': '🌨️',  // 大雪-暴雪
        'd29': '🌋',  // 浮尘
        'd30': '🌊',  // 扬沙
        'd31': '🌊',  // 强沙尘暴
        'd32': '🌫️',  // 霾
        
        // 夜间天气
        'n00': '🌙',  // 晴（夜间）
        'n01': '☁️',  // 多云（夜间）
        'n02': '☁️',  // 阴（夜间）
        'n03': '🌦️',  // 阵雨（夜间）
        'n04': '⛈️',  // 雷阵雨（夜间）
        'n05': '⛈️',  // 雷阵雨伴有冰雹（夜间）
        'n06': '🌨️',  // 雨夹雪（夜间）
        'n07': '🌧️',  // 小雨（夜间）
        'n08': '🌧️',  // 中雨（夜间）
        'n09': '🌧️',  // 大雨（夜间）
        'n10': '🌧️',  // 暴雨（夜间）
        'n11': '🌧️',  // 大暴雨（夜间）
        'n12': '🌧️',  // 特大暴雨（夜间）
        'n13': '🌨️',  // 阵雪（夜间）
        'n14': '❄️',  // 小雪（夜间）
        'n15': '❄️',  // 中雪（夜间）
        'n16': '❄️',  // 大雪（夜间）
        'n17': '❄️',  // 暴雪（夜间）
        'n18': '🌫️',  // 雾（夜间）
        'n19': '🌧️',  // 冻雨（夜间）
        'n20': '🌊',  // 沙尘暴（夜间）
        'n21': '🌧️',  // 小雨-中雨（夜间）
        'n22': '🌧️',  // 中雨-大雨（夜间）
        'n23': '🌧️',  // 大雨-暴雨（夜间）
        'n24': '🌧️',  // 暴雨-大暴雨（夜间）
        'n25': '🌧️',  // 大暴雨-特大暴雨（夜间）
        'n26': '🌨️',  // 小雪-中雪（夜间）
        'n27': '🌨️',  // 中雪-大雪（夜间）
        'n28': '🌨️',  // 大雪-暴雪（夜间）
        'n29': '🌋',  // 浮尘（夜间）
        'n30': '🌊',  // 扬沙（夜间）
        'n31': '🌊',  // 强沙尘暴（夜间）
        'n32': '🌫️',  // 霾（夜间）
      };
      
      // 返回对应的图标，如果没有匹配则返回默认图标
      return weatherIcons[this.weatherCode] || '❓';
    },
    // 图标样式
    iconStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        'margin-top': '-10rpx'
      };
    },
    // 文本样式
    textStyle() {
      return {
        fontSize: `${this.size}px`,
        color: this.color,
        lineHeight: 1
      };
    }
  }
};
</script>

<style scoped>
.weather-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -10rpx;
}

.icon-text {
  display: block;
}
</style>